import { FC, useRef } from "react"
import { connect } from "react-redux"
import { Swiper, SwiperRef } from 'antd-mobile'
import SwiperVideo from './components/swiperVideo'
import SwiperGame from './components/swiperGame'
import SwiperShip from './components/swiperShip'
import "./index.scss"

interface IBanner {}

const Banner: FC<IBanner> = () => {

	const banner = useRef<SwiperRef>(null)

	return (
		<div id="banner">
			<Swiper
				className="swiper-box"
				defaultIndex={0}
				ref={banner}
				loop
				autoplay
				indicator={(total, current) => (
					current !== 1 && 
					<div className="swiper-dots-box">
					  {
						new Array(total).fill(null).map((item, index) => (
							<span className={`${current === index ? 'active' : ''}`} onClick={() => banner.current?.swipeTo(index)}>{index + 1}</span>
						))
					  }
					</div>
				  )}
			>
				<Swiper.Item>
					<SwiperShip />
				</Swiper.Item>
				<Swiper.Item>
					<SwiperGame />
				</Swiper.Item>
				<Swiper.Item>
					<SwiperVideo />
				</Swiper.Item>
			</Swiper>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(Banner)